<template>
      <b-menu-item :icon="item.icon" tag="a">
        <template #label="props" >
          <b-icon v-if="item.children"  class="icon" :icon="props.expanded ? 'menu-down' : 'menu-right'" size="is-small"></b-icon>
          <span class="name elip " >{{ item.label }}</span>
        </template>
        <list v-if="item.children"  :data="item.children" :is-submenu-list="true"/>
      </b-menu-item>
      <!--<div  v-else>
        <b-menu-item :icon="item.icon" :label="item.label" :class="check.id==item.id?'is-active':'no-active'" @click="checkItem(item)"></b-menu-item>
      </div>-->

</template>

<script>
import path from 'path'
import { isExternal } from '@/utils/validate'
export default {
  name: "sidebarItem",
  components: {
    list: () => import('./list')
  },
  props:{
    isSubmenuList: {
      type: Boolean,
      default: false
    },
    item: {
      type: Object,
      default: () => []
    }
  },
  data(){
    return{
      check:{}
    }
  },
  computed:{
    isActive(){
      return function(item){
        console.log('item2=',item)
        return this.check.label===item.label
      }
    },
  },
  methods:{
    changeItem(item){
      item.active=!item.active
      this.$emit('tree-change', item)
    },
    checkItem(item){
      console.log('item=',item)
      this.check=item
    },
  }
}
</script>

<style lang="scss" scoped>
.name{
  color: $base-color;
}
</style>
